<template>
  <div class="jd-cart">
    <JdNavbar title='购物车' @skip='login'></JdNavbar>

    <!-- 购物车的一条相关记录 -->
    <van-swipe-cell v-for='(item, index) in list' :key='item._id'>
      <van-row type="flex">
        <van-col span="2"></van-col>
        <van-col span="2" class="v-check">
          <van-checkbox v-model="item.checked" @click="select" />
        </van-col>
        <van-col span="20">
         <van-card
            :num="item.num"
            :price="item.price"
            :desc="item.desc"
            :title="item.name"
            :thumb="$img.imgServe + item.img"
         >
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-button size="mini" @click="changeCount(item, index, false)">
                -
              </van-button>
              <van-button size="mini" @click="changeCount(item, index, true)">
                +
              </van-button>
            </template>
          </van-card>
        </van-col>
      </van-row>

      <!-- 删除模板 -->
      <template #right>
        <van-button 
          square text="删除" 
          type="danger" 
          class="delete-button" 
          @click='remove(item, index)'
        />
      </template>
    </van-swipe-cell>

    <!-- 提交相关订单的按钮 -->
    <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="full" @click="selectAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>

    <Tabbar />
  </div>
</template>

<script>
import {
  Tabbar,
  JdNavbar
} from '@/components'

export default {
  name: 'Cart',

  components: {
    Tabbar,
    JdNavbar
  },

  data() {
    return {
      // list是用于保存订单的数据
      list: [],
      full: false,
      num: ''
    }
  },

  // mounted () {
  //   this.init()
  // },

  activated () {
    this.init()
  },

  computed: {
    // 使用计算属性，计算当前所有选中的商品的价格
    total () {
      let sum = 0
      this.list.map((item) => {
        if (item.checked) {
          sum += (item.num * item.price) * 100
        }
      })
      return sum
    }
  },

  methods: {
    login () {
      this.$router.push('/login')
    },

    // 页面初始化，当用户登录成功后，显示用户已加入购物车的商品
    init () {
      this.$api.getCartList({}).then(res => {
				// 获取商品表中goods的数据
        this.list = res.data || []
      })
    },

    initSelect () {
      let count = 0
      this.list.map(item => {
        if (item.checked) {
          count++
        }
      })
      this.full = this.list.length === count ? true : false
    },

    // 判断当前的商品按钮是否全部选中，与全选按钮做相关关联
    select () {
      this.initSelect()
    },

    // 点击全选按钮时，所有的商品按钮则选中
    selectAll () {
      this.list.map((item, index) => {
        this.list[index].checked = this.full          
      })
      this.list = JSON.parse(JSON.stringify(this.list))
    },

    // 用户点击删除按钮时可以改变商品的状态，并非删除商品 
    remove(item, index) {
      this.$dialog.comfirm({
        title: '温馨提示',
        message: `您确定要删除${item.name}吗？`,
        theme: 'round-button'
      }).then(() => {
        const params = {
          id: item.goods_id
        }
        this.$api.removeGoods(params).then(() => {
          this.list.splice(index, 1)
          this.initSelect()
        })
      })
    },

    // 点击＋号或者是－号时，能改变当前商品的数量
    // 为了性能优化，可以为当前加减号做节流处理
    changeCount (item, index, status) {
      if (!status && item.num === 1) {
        return this.$dialog.alert({
          title: '温馨提示',
          message: '商品数量不能再减'
        })
      }
      const data = {
        id: item.goods_id,
        num: status ? ++item.num : --item.num
      }
      this.num = data.num
      this.$api.updateGoods(data).then(() => {})
    },

    // 当前商品选中后，要被购买时，将会提交到后端
    onSubmit () {
      // 提交购物车
      let goods = ''
      this.list.map(item => {
        if (item.checked) goods += (';' + item.goods_id)
      })
      const data = { 
				goods,
        num: this.num
			}
      if (!goods) {
        return this.$dialog.alert({
          title: '温馨提示',
          message: '请选择要提交的商品'
        })
      }
      // 将购物车中的商品提交到订单中
      this.$api.updateCart(data).then(() => {
        location.reload()
        return this.$dialog.success({
          title: '小贴士',
          message: '购买商品成功'
        })
      })
    },
    
    onClickEditAddress () {
      this.$router.push('/addr/list')
    }
  }
}
</script>

<style lang="scss" scoped>
  .van-row {
    background-color: #fff;
    .van-card {
      background-color: #fff;
    }
    .v-check {
      display: flex;
      align-items: center;
    }
  }

  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  .van-submit-bar {
    margin-bottom: 1.4rem;
  }
</style>